import React from 'react'
import { Card, Spin, Icon, Alert } from 'antd'
import './ui.less'

export default class Modals extends React.Component {
  render() {
    const icon = <Icon type="loading" style={{fontSize: 24}}/>
    return (
      <div>
        <Card title="Spin用法" className="card-wrap">
          <Spin size="small"/>
          <Spin style={{margin:'0 10px'}}/>
          <Spin size="large"/>
          <Spin indicator={icon} style={{ marginLeft: 10 }} spinning={true}/>
        </Card>
        <Card title="内容遮罩" className="card-wrap">
          <Alert 
            message="ofo"
            description="这是内容遮罩弹窗"
            type="info"
          />
          <Spin>
            <Alert 
              message="ofo"
              description="这是内容遮罩弹窗"
              type="info"
            />
          </Spin>
          <Spin tip="加载中">
            <Alert 
              message="ofo"
              description="这是内容遮罩弹窗"
              type="info"
            />
          </Spin>
          <Spin indicator={icon}>
            <Alert 
              message="ofo"
              description="这是内容遮罩弹窗"
              type="info"
            />
          </Spin>
        </Card>
      </div>
    )
  }
}